<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">
    <input id="uMsg" type="hidden" th:value="${uMsg}">
    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
        <form class="layui-form" action="/user/update" method="post" onsubmit="function f() {
                  layer.msg('修改成功');
                }">
            <div class="layui-form-item">
                <label class="layui-form-label">编号：</label>
                <div class="layui-inline">
                    <input type="text" name="id" th:value="${user.id}" lay-verify="required" readonly autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-inline">
                    <input type="text" name="userName" th:value="${user.userName}" lay-verify="username" readonly autocomplete="off" placeholder="请输入用户名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-inline">
                    <input type="password" name="password" th:value="${user.password}" lay-verify="password|required" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" lay-verify="required|confirmPass" class="layui-input" placeholder="请确认密码">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称：</label>
                <div class="layui-inline">
                    <input type="text" name="nickName" th:value="${user.nickName}" lay-verify="required" placeholder="请输入昵称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-inline">
                    <input type="text" name="gender" class="layui-input" th:value="${user.gender}" lay-verify="required" placeholder="请输入性别" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话：</label>
                <div class="layui-inline">
                    <input type="text" name="telephone" th:value="${user.telephone}" lay-verify="telephone" placeholder="请输入联系电话" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址：</label>
                <div class="layui-inline">
                    <input type="text" name="address" th:value="${user.address}" lay-verify="required" placeholder="请输入地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button  class="layui-btn" lay-submit="" style="margin-left: 160px;" >修改</button>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;

        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length == 0) {
                    return "用户名不能为空";
                }
            },
            password: [/^[A-Za-z0-9]+$/, "密码必须由数字和字母组成"],
            telephone: [/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, "请输入正确的电话"],
            confirmPass:function(value){
                if($('input[name=password]').val() !== value)
                    return '提示：两次输入密码不一致！';
            }
        });

        var msg=$('#uMsg').val();
        console.log("msg:"+msg);
        if(msg!=null&&msg!==''){
            layer.msg(msg);
        }

    });



</script>
</body>
</html>